<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <jsp:include page="../base.jsp"></jsp:include>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${ctx}/static/css/common.css"/>
</head>
<body>
<div class="layui-container">
    <br><br>
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn" id="btn-fold">全部折叠</button>
        <button class="layui-btn" id="btn-addfmenu">添加目录</button>
    </div>

    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon"></i></a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon"></i></a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="del"><i class="layui-icon"></i></a>
</script>

 <script src="${ctx}/static/layui/layui.js"></script>
<script>
    layui.config({
        base: '../static/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        var reload=function(){treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'parentId',
            elem: '#auth-table',
            treeDefaultClose:false,
            treeLinkage:false,
            url: '${ctx}/admin/permission/list',
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'name', minWidth: 200, title: '权限名称'},
                {field: 'permission', title: '权限标识'},
                {field: 'resUrl', title: '菜单url'},
                {field: 'sort', width: 80, align: 'center', title: '排序号'},
                {
                    field: 'type', width: 80, align: 'center', templet: function (d) {
                        if (d.type == 2) {
                            return '<span class="layui-badge layui-btn-danger">按钮</span>';
                        }
                        if (d.type == 0) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '类型'
                },
                {templet: '#auth-state', width: 180, align: 'center', title: '操作'}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });
        }
        reload();
        $('#btn-expand').click(function () {
            treetable.expandAll('#auth-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#auth-table');
        });
        
        $('#btn-addfmenu').click(function () {
        	layer.msg('添加目录');
        	layer.open({
				  type: 2, //类型，解析url
				  closeBtn: 1, //关闭按钮是否显示 1显示0不显示
				  title: '操作权限', //页面标题
				  shadeClose: true, //点击遮罩区域是否关闭页面
				  shade: 0.8,  //遮罩透明度
				  maxmin: true,
				  area: ['900px', '450px'],  //弹出层页面比例
				  content: '${ctx}/admin/permission/addPermissionPage?opt=add&type=0'  //弹出层的url
			});
        });
        
      //监听工具条
        table.on('tool(auth-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
            	layer.confirm('确认删除?', function(index){
    		    	//执行请求
    		    	$.post("${ctx}/admin/permission/delete?id="+data.id, function (data) {
                    if(data){
                    	reload(); //重新加载表格
        		        layer.close(index);
                    }
                });
    		        
    		      });
            } else if (layEvent === 'edit') {
                layer.open({
    				  type: 2, //类型，解析url
    				  closeBtn: 1, //关闭按钮是否显示 1显示0不显示
    				  title: '操作权限', //页面标题
    				  shadeClose: true, //点击遮罩区域是否关闭页面
    				  shade: 0.8,  //遮罩透明度
    				  maxmin: true,
    				  area: ['900px', '450px'],  //弹出层页面比例
    				  content: '${ctx}/admin/permission/addPermissionPage?id='+data.id+'&opt=edit&type='+data.type  //弹出层的url
    			});
            } else {
            	if (data.type == 2) {
            		layer.msg('按钮下不能添加元素', {icon: 2,offset: '2px'});
            		return;
				}
            	var type = '1';
            	if (data.type == '1') {
            		type = '2';
				}
            	layer.open({
    				  type: 2, //类型，解析url
    				  closeBtn: 1, //关闭按钮是否显示 1显示0不显示
    				  title: '操作权限', //页面标题
    				  shadeClose: true, //点击遮罩区域是否关闭页面
    				  shade: 0.8,  //遮罩透明度
    				  maxmin: true,
    				  area: ['900px', '450px'],  //弹出层页面比例
    				  content: '${ctx}/admin/permission/addPermissionPage?id='+data.id+'&opt=add&type='+type  //弹出层的url
    			});
			}
        });
    });
</script>
</body>
</html>